Question

我无法将我的angular 2应用程序移植到生产环境中..它一直在node_modules下查找我的脚本。

我是棱角分明2的新人，但经过半天的搜索后，我似乎无法解决这个问题？

这里有错误：

＆＃13;

func loginPost(email: String, password: String, completion: @escaping (_ userInfo: User?, _ error: [[String : Any]]?) -> Void) {
        let headers: HTTPHeaders = ["Content-Type" : "application/json"]
        let parameters: Parameters = ["email": "\(email)","password": "\(password)"]

Alamofire.request(loginURL, method: .post, parameters: parameters, encoding: JSONEncoding.default, headers: headers)
    .validate(contentType: ["application/json"])
    .responseJSON { response in
        if response.response?.statusCode == 200 {
            print("LOGIN_SUCCESS with JSON: \(response.result.value!)")
            if let userInfo = response.value as? [String : Any] {


                self.loggedInUser.setUser(firstName: userInfo.["user"]["name"] as! String!,
                                          email: userInfo["email"] as! String!,
                                          token: userInfo["token"] as! String!,
                                          id: "1"as String!,
                                          longitude: "40.0"as String!,
                                          latitude: "-70"as String!)
                self.loggedInUser.printUser()
                return completion(self.loggedInUser, nil)
            }
        } else {
            print("LOGIN_FAILURE with JSON: \(response.result.value!)")

            if let error = response.result.value as? [[String: Any]] {
                //If you want array of task id you can try like
                return completion(nil, error)
            }
        }
}

＆＃13;

这是index.html：

> "XHR error:  (404 Not Found) loading http://olweb/node_modules/@angular/core/bundles/core.umd.js
  Instantiating http://olweb/node_modules/@angular/core/bundles/core.umd.js
  Loading http://olweb/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js
  Loading http://olweb/application/main.js
  Loading application/main.js"

这是我的gulp任务：

＆＃13;

    <script src="~/scripts/angular2-dev.min.js?version=@version"></script>

    <!-- 2. Configure SystemJS -->
    <script src="~/systemjs.config.js"></script>
    <script>
        System.import('application/main.js').catch(function (err) { console.error(err); });
    </script>

＆＃13;

这是我的system.config.js：

//
// the following series of tasks builds each component of angular 2 into a temp directory - for caching in development mode
//
gulp.task('@angular.js', 
    function () {
        var SystemBuilder = require('systemjs-builder');
        var builder = new SystemBuilder('./', 'systemjs.config.js');
        builder.bundle('@angular/core', appDevTemp + '/core.umd.js');
        builder.bundle('@angular/compiler', appDevTemp + '/compiler.umd.js');
        builder.bundle('@angular/forms', appDevTemp + '/forms.umd.js');
        builder.bundle('@angular/common', appDevTemp + '/common.umd.js');
        builder.bundle('@angular/http', appDevTemp + '/http.umd.js');
        builder.bundle('@angular/router', appDevTemp + '/router.umd.js');
        builder.bundle('@angular/platform-browser', appDevTemp + '/platform-browser.umd.js');
        builder.bundle('@angular/animations/browser', appDevTemp + '/animations-browser.umd.js');
        builder.bundle('@angular/animations', appDevTemp + '/animations.umd.js');

        builder.bundle('@angular/platform-browser/animations', appDevTemp + '/platform-browser-animations.umd.js');
        builder.bundle('@angular/platform-browser-dynamic', appDevTemp + '/platform-browser-dynamic.umd.js');
        return;

});
//
//  minify the development build for angular 2
//
gulp.task('buildForDevelopment', ["@angular.js"],
    function () {

        return gulp.src([ './node_modules/core-js/client/shim.min.js','./node_modules/zone.js/dist/zone.js','./node_modules/systemjs/dist/system.src.js', appDevTemp + '/*.js']).pipe(uglify()).pipe(concat('angular2-dev.min.js')).pipe(gulp.dest(appProd));
    }

);

Answer 1

经过多次不同尝试并使其工作一半后，我意识到其他人也有问题。我花了很多时间学习和使用Webpack，而不是试图让systemjs正常工作，而且对我来说似乎工作得更好。以下是我所做的更改中的一些代码片段，如果您尝试让systemjs正常工作可能会有所帮助，但我不建议这样做。

var ngpackageNames = [
  'core',
  'common',
  'compiler',
    'platform-browser',
  'animations',
  'platform-browser-dynamic',
  'http',
  'router',
  'forms'
];


//// these packages have different naming conventions.. manually specify them
packages['@angular/animations/browser'] = { main: '../bundles/animations-browser.umd.js', defaultExtension: 'js' };
packages['@angular/platform-browser/animations'] = { main: '../bundles/platform-browser-animations.umd.js', defaultExtension: 'js' };

//// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
ngpackageNames.forEach(function (pkgName) {
    packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
});

var bundles = {
    '/Scripts/Rx.min.js': [
        "rxjs/*",
        "rxjs/operator/*",
        "rxjs/scheduler/*",
        "rxjs/observable/*",
        "rxjs/add/operator/*",
        "rxjs/add/observable/*",
        "rxjs/symbol/*",
        "rxjs/util/*"
    ]
};
var config = {
    map: map,
    packages: packages,
    bundles: bundles,
    paths: paths
}
System.config(config);

以下是一些有用的信息和讨论 UMD Bundle with RxJs

使用Angular 2和SystemJS-builder捆绑实时..尝试从node_modules加载？

1 个答案: