Question

我正在尝试使用Angular 4创建一个具有流动文件结构的平均堆栈应用程序：

file structure

我正在关注该示例位于GitHub的 MEAN Web Development - Second Edition 这本书。

我只将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

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

Answer 1

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

希望这对你也有帮助。

使用Angular 4的平均堆栈不起作用

1 个答案: