平均堆栈角4不工作

问题描述：

我试图创建角4平均栈的应用程序，具有流动的文件结构：平均堆栈角4不工作

file structure

我的书MEAN Web开发以下 - 二版本该示例位于GitHub。

我只将Angular 2代码库替换为Angular 4代码库。

index.ejs：

<!DOCTYPE html> 
    <html> 
     <head> 
     <title></title> 
     <base href="/"> 
     <link rel='stylesheet' href='stylesheets/style.css' /> 
     <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css"> 
     <!-- Polyfill(s) for older browsers --> 
     <script src="lib/core-js/client/shim.min.js"></script> 
     <script src="lib/zone.js/dist/zone.js"></script> 
     <script src="lib/systemjs/dist/system.src.js"></script> 
     <script src="systemjs.config.js"></script> 
     <script> 
      System.import('main.js').catch(function(err){ console.error(err); }); 
     </script> 
     <link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/> 
     <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet"/> 
     <script src="lib/jquery/dist/jquery.min.js"></script> 
     <script src="lib/tether/dist/js/tether.min.js"></script> 
     <script src="lib/bootstrap/dist/js/bootstrap.js"></script> 
     </head> 
     <body> 
     <mean-app> 
     <h1>Loading...</h1> 
     </mean-app> 
     </body> 
     </html>

express.js：

const config=require("./config"); 
    const express=require("express"); 
    const morgan=require("morgan"); 
    const compress=require("compression"); 
    const bodyParser=require("body-parser"); 
    const methodOverride=require("method-override"); 
    const session=require("express-session"); 
    const flash=require("connect-flash"); 
    const passport=require("passport"); 
    const path=require("path"); 

    module.exports=function() { 
     const app=express(); 

     //setting logging for dev and compression for prod 
     if(process.env.NODE_ENV === 'development'){ 
      app.use(morgan('dev')); 
     }else if(process.env.NODE_ENV === 'production'){ 
      app.use(compress()); 
     } 

     //setting body parser that provides several middleware to handle the request data 
     app.use(bodyParser.urlencoded({ 
      extended:true 
     })); 
     app.use(bodyParser.json()); 

     //using the method-override module provides DELETE and PUT HTTP verbs legacy support 
     app.use(methodOverride()); 

     //Configuring sessions 
     app.use(session({ 
      saveUninitialized:true, 
      resave:true, 
      secret:config.sessionSecret 
     })); 

     //Configuring the view system 
     app.set("views","./app/views"); 
     app.set("view engine","ejs"); 

     //Configuring Connect-Flash 
     app.use(flash()); 

     //Configuring Passport 
     app.use(passport.initialize()); 
     app.use(passport.session()); 

     //importing routes 
     require("../app/routes/index.routes")(app); 
     require("../app/routes/users.routes")(app); 

     //Serving static files 
     app.use("/",express.static("./public")); 
     //including the Angular library files 
     app.use("/lib",express.static(path.resolve("./node_modules"))); 

     return app; 
     };

system.config.js：

/** 
    * System configuration for Angular samples 
    * Adjust as necessary for your application needs. 
    */ 
    (function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
     // our app is within the app folder 
     'app': 'app', 
     'main': 'main.js', 

      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 

      // other libraries 
      'rxjs':      'npm:rxjs', 
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
      }, 
      // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
      defaultExtension: 'js', 
      meta: { 
       './*.js': { 
       loader: 'systemjs-angular-loader.js' 
      } 
      } 
     }, 
      rxjs: { 
       defaultExtension: 'js' 
      } 
     } 
     }); 
     })(this);

而且我提示以下错误：在浏览器控制台：

Please click to open the image

有谁知道什么是我的配置问题？

错误信息？控制台错误？编译器错误？请给我们更多的信息，我们将很乐意帮助！：D – SrAxi

您是否使用npm install命令安装了所有依赖关系？ – mankers

在这个声明的顶部移动：'' – SrAxi

答

什么是您的Node.js版本？我检查了mean.io nodejs版本是v4.x. （在linux中为“node -v”）。我在nodejs v4上遇到了角度4的许多问题，然后我将它升级到v7.10.0（对于角度4应该至少是v6），并且问题在它之后解决。

希望这对你也有帮助。

嗨，我正在使用此NodeJS版本v6.10.1 –

平均堆栈角4不工作

相关推荐