Primeng: Information about angular in devDependecies

[ar53n]

Hello, i cloned repository and can't start project for debugging and commit.
Cannot find module '@angular/platform-browser/animations'.
and i not understood what angular version uses.

Suggestion maybe we can get information about recommended angular packages. Thank you

[twp0217]

add the following dependencies section in package.json

  "dependencies": {
      "@angular/common": "4.0.0-rc.3",
      "@angular/compiler": "4.0.0-rc.3",
      "@angular/core": "4.0.0-rc.3",
      "@angular/forms": "4.0.0-rc.3",
      "@angular/http": "4.0.0-rc.3",
      "@angular/platform-browser": "4.0.0-rc.3",
      "@angular/platform-browser-dynamic": "4.0.0-rc.3",
      "@angular/router": "4.0.0-rc.3",
      "@angular/animations": "4.0.0-rc.3",
      "core-js": "^2.4.1",
      "rxjs": "^5.2.0",
      "zone.js": "^0.7.7"
  },

[qjnz]

What is the reason why these dependencies are not included in the first place? @twp0217

[qjnz]

Ok, I found the ansewer, there is a guide Building From Source.

However, the guide is not complete. I have to do the following steps on top of the steps showing from the wiki page.

1.) npm install - Downloads the dependencies
2.) npm run build-dev
3.) gulp build - Creates resource bundle for css
4.) change the publicPath in config/webpac.dev.js file to 'http://localhost:8082/'
5.) npm start - Runs the development server

After the step 2 and step 4 above, it works for me. I am building the latest version 4.0.0-rc.2-SNAPSHOT

All the best!

[qjnz]

One more thing is that you need to build the theme.css yourself as well since I can't find anywhere it is building it in the webpack or gulp.js. So I did it myself in the task build-theme below I created in the gulp.js. It is using omega theme by default in the index.html.

To be able to use gulp-sass, you need to do npm i gulp-sass -D

'use strict';

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    sass = require('gulp-sass'),
    uglifycss = require('gulp-uglifycss'),
    rename = require('gulp-rename'),
    del = require('del'),
    flatten = require('gulp-flatten');

gulp.task('build-css', function() {
    gulp.src([
        'components/common/common.css',
        'components/**/*.css'
    ])
    .pipe(concat('primeng.css'))
    .pipe(gulp.dest('resources'));
});

gulp.task('build-css-prod', function() {
    gulp.src([
        'components/common/common.css',
        'components/**/*.css'
    ])
    .pipe(concat('primeng.css'))
    .pipe(gulp.dest('resources'))
    .pipe(uglifycss({"uglyComments": true}))
    .pipe(rename('primeng.min.css'))
    .pipe(gulp.dest('resources'));  
});

gulp.task('build-theme', function() {
    gulp.src([
        'resources/themes/omega/theme.scss'
    ])
    .pipe(sass().on('error', sass.logError))
    .pipe(rename('theme.css'))
    .pipe(gulp.dest('resources/themes/omega')); 
});

//Building images
gulp.task('images', function() {
    return gulp.src(['components/**/images/*.png', 'components/**/images/*.gif'])
        .pipe(flatten())
        .pipe(gulp.dest('resources/images'));
});

//Cleaning previous gulp tasks from project
gulp.task('clean', function() {
    del(['resources/primeng.css','resources/primeng.min.css','resources/images']);
});

//Building project with run sequence
gulp.task('build', ['clean','build-css-prod', 'build-theme', 'images']);

[ar53n]

@qjlee Thank you. Then i guess need add instruction and roadmap to readme that see more people.

[sudheerj]

In the updated PrimeNG project it is not required to maintain DevDependencies separately. The similar issue is closed here https://github.com/primefaces/primeng/issues/967

There is already one github issue on building themes.