我正在尝试使用 Angular 4 创建一个具有流动文件结构的平均堆栈应用程序:
我正在关注《MEAN Web Development - Second Edition》一书，该示例位于 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
有人知道我的配置有什么问题吗？
最佳答案
您的 Node.js 版本是什么？我检查了mean.io nodejs版本是v4.x。 (Linux 中为“node -v”)。我之前在nodejs v4上遇到了很多关于Angular 4的问题。然后我将其升级到v7.10.0(对于Angular 4来说，应该至少是v6)，之后问题就解决了。
希望这对您也有帮助。
关于node.js - Angular 4 的平均堆栈不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43845469/