System Js load issues

UI Components for Angular
dsoltesz
Posts: 63
Joined: 03 May 2016, 04:42

03 May 2016, 04:53

I have a working angular 2 app with services / routing etc. I'm looking to add primeNg into my site but things don't seem to load.

Here is my packages dependencies

Code: Select all

 
"dependencies": {
    "angular2": "2.0.0-beta.17",
    
    "systemjs": "~0.19.25",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "~0.6.9",
    "breeze-client": "~1.5.6",
    "handlebars": "^4.0.5",
    "primeng": "^1.0.0-beta.4",
    "primeui": "^4.1.9"
  },
I have a gulp task that moves things around a little...

Code: Select all

gulp.task('moveToLibs', function () {
    gulp.src([
        'node_modules/angular2/bundles/js',
        'node_modules/angular2/bundles/angular2.*.js*',
        'node_modules/angular2/bundles/angular2-polyfills.js',
        'node_modules/angular2/bundles/http.*.js',
        'node_modules/angular2/bundles/http.js',
        'node_modules/angular2/bundles/router.*.js*',
        'node_modules/es6-shim/es6-shim.min.js*',
        'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
        'node_modules/systemjs/dist/*.*',
        //'node_modules/jquery/dist/jquery.*js',
        //'node_modules/bootstrap/dist/js/bootstrap*.js',
        'node_modules/rxjs/bundles/Rx.js',
        'node_modules/angular2/platform/browser.js',
        'node_modules/breeze-client/build/breeze.min.js'
    ]).pipe(gulp.dest('./scripts/lib'));

    gulp.src([
        'node_modules/primeng/**/*.js',
    ]).pipe(gulp.dest('./scripts/lib/primeng'));
    gulp.src([
        'node_modules/primeui/**/*.js',
    ]).pipe(gulp.dest('./scripts/lib/primeui'));

    gulp.src([
        'node_modules/primeui/themes/bluesky/theme.css',
        'node_modules/primeui/primeui-ng-all.min.css'
    ]).pipe(gulp.dest('./content/lib'));
});
I updated my index file

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <base href="/" />
    @Styles.Render("~/Content/css")

    <link rel="stylesheet" type="text/css" href="~/Content/lib/theme.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="~/Content/lib/primeui-ng-all.min.css" />

    <!-- 1. Load libraries -->
    @*@Scripts.Render("~/startup");*@
    <!-- IE required polyfills, in this exact order -->
    <script src="~/Scripts/lib/breeze.min.js"></script>
    <script src="~/Scripts/lib/es6-shim.min.js"></script>
    <script src="~/Scripts/lib/system-polyfills.js"></script>
    <script src="~/Scripts/lib/shims_for_IE.js"></script>
    <script src="~/Scripts/lib/angular2-polyfills.js"></script>
    <script src="~/Scripts/lib/system.src.js"></script>
    <script src="~/Scripts/lib/primeui/primeui-ng-all.min.js"></script>
    <script src="~/Scripts/lib/Rx.js"></script>
    <script src="~/Scripts/lib/angular2.dev.js"></script>
    <script src="~/Scripts/lib/http.js"></script>
    <script src="~/Scripts/lib/router.min.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            

            meta: {
                '*.js': { scriptLoad: true } //this allows TS debugging in VS
            },
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                },
                'primeng': {defaultExtension: 'js', format: 'register'}

            },
            map: {
                'primeng': 'scripts/lib/primeng'
            }
        });
        System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

    
    
</head>
<body>

    <div class="container body-content">
        @RenderBody()
    </div>

    
   
@RenderSection("scripts", required: false)
</body>
</html>


I get the following error

require is not a function: priming.js:5

and

http://localhost:32532/scripts/lib/primeng/primeng.js did not call System.register or AMD define. If loading a global module configure the global name via the meta exports property for script injection support." angular2-polyfills.js:349


I'm sure its something simple but not sure why its saying its not registered.

User avatar
DarthMaul
Posts: 582
Joined: 23 Nov 2015, 21:20

03 May 2016, 14:28

Hi,
In your index.html could you please try it like that it worked for me last time.

Code: Select all

map: {
         'angular2': 'scripts/lib/angular2',
         'primeng': 'scripts/lib/primeng'
   }

dsoltesz
Posts: 63
Joined: 03 May 2016, 04:42

03 May 2016, 14:38

that starts causing all kinds of problems with 'scripts/lib/anguarl2/core not found, scripts/lib/angular2/platform/browser not found etc...


look at my gulp file and the files that I copy..its a flat structure..i don't manually include core, browser etc..why is adding that map forcing those files having to be included?

[img]
https://onedrive.live.com/redir?resid=8 ... hoto%2cPNG
[/img]

picture of libs folder

dsoltesz
Posts: 63
Joined: 03 May 2016, 04:42

03 May 2016, 15:06

how could I just load one component, ie button without loading everything else. Need to choose which components I want in my app. Running the sample it loads everything.

dsoltesz
Posts: 63
Joined: 03 May 2016, 04:42

03 May 2016, 16:28

I updated my gulpfile move to keep the same folder structure as in node_modules and can get things to work now. However, if I try to add my "meta" tag back in to get TS debugging everything starts breaking again. http://localhost:32532/scripts/lib/angular2/core.js did not call System.register or AMD define.

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <base href="/" />
    @Styles.Render("~/Content/css")

    <link rel="stylesheet" type="text/css" href="~/Content/lib/theme.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="~/Content/lib/primeui-ng-all.min.css" />

    <!-- 1. Load libraries -->
    @*@Scripts.Render("~/startup");*@
    <!-- IE required polyfills, in this exact order -->
    <script src="~/Scripts/lib/breeze-client/breeze.min.js"></script>
    <script src="~/Scripts/lib/es6-shim/es6-shim.min.js"></script>
    <script src="~/Scripts/lib/systemjs/dist/system-polyfills.js"></script>
    <script src="~/Scripts/lib/shims_for_IE.js"></script>
    <script src="~/Scripts/lib/angular2/bundles/angular2-polyfills.js"></script>
    <script src="~/Scripts/lib/systemjs/dist/system.src.js"></script>
    <script src="~/Scripts/lib/primeui/primeui-ng-all.min.js"></script>
    
    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            defaultJSExtensions: true,

            //meta: {
            //    '*.js': { scriptLoad: true } //this allows TS debugging in VS
            //},
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                },
                //'primeng': {defaultExtension: 'js', format: 'register'}

            },
            map: {
                'rxjs': 'scripts/lib/rxjs',
                'angular2': 'scripts/lib/angular2',
                'primeng': 'scripts/lib/primeng'
            }
        });
        System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

    <script src="~/Scripts/lib/rxjs/bundles/Rx.js"></script>
    <script src="~/Scripts/lib/angular2/bundles/angular2.dev.js"></script>

    
    
</head>
<body>

    <div class="container body-content">
        @RenderBody()
    </div>

    
   
@RenderSection("scripts", required: false)
</body>
</html>


dsoltesz
Posts: 63
Joined: 03 May 2016, 04:42

03 May 2016, 18:00

note, if I remove the primeng code the meta stuff works fine and I can debug TS files directly. Now I need them to play nice :)

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

03 May 2016, 22:08

PrimeNG is distributed in common js format so you may try;

Code: Select all

'primeng': {defaultExtension: 'js', format: 'cjs'}
or

Code: Select all

'primeng': {defaultExtension: 'js'}

dsoltesz
Posts: 63
Joined: 03 May 2016, 04:42

04 May 2016, 21:44

having the 'meta' define only works if I don't do the primeNg setup..as soon as I do primeNg setup with 'meta", things start breaking :(

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

04 May 2016, 23:22

Sorry what is meta? Do you mean meta tag?

dsoltesz
Posts: 63
Joined: 03 May 2016, 04:42

05 May 2016, 00:01

Code: Select all

 //meta: {
            //    '*.js': { scriptLoad: true } //this allows TS debugging in VS
            //},
in System.config see my post up above

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 13 guests