1
我試圖創建角4平均棧的應用程序，具有流動的文件結構：平均堆棧角4不工作
我的書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